<!DOCTYPE html>
<html>

	<head>
		<meta name="keywords" content="camicroscope, quip" />
	    <meta charset='utf-8'>
	    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
	    <meta name='viewport' content='width=device-width, initial-scale=1'>

	    <title>CaMessage Unit Test Page</title>

	    <!-- camessage component dependencies -->
		<!-- google material icons css sheet -->
		<link href='/iconfont/material-icons.css' rel='stylesheet'/>
		<!-- css sheet -->
		<link rel='stylesheet' type='text/css' media='all' href='/css/style.css'/>

		<link rel='stylesheet' type='text/css' media='all' href='/components/camessage/camessage.css'/>
		<!-- util.js -->
		<script src = '/common/util.js' type='text/javascript'></script>
		<!-- message display js -->
		<script src='/components/camessage/camessage.js'></script>

	</head>
	<body>
		<!-- this is a flag element that indicates the resources has been loaded -->
		<input id='isLoad' type='checkbox' style='display:none;'>
		<!-- ca message test cases -->

		<!-- constructor -->
		<div id = 'case1'></div>

		<!-- change text -->
		<div id = 'case2'></div>

		<!-- constructor -->
		<div id = 'case3'></div>

	</body>
	<!-- test script for each case -->
	<script type = "text/javascript">
		// TODO initialize UI component

		// case 1: test options to initialize component
		const message1 = new CaMessage({id:'case1', defaultText:'Hello World'});

		// case 2: change text
		const message2 = new CaMessage({id:'case2', defaultText:'Hello World'});
		message2.changeTxt('Change Text');

		// case 3: change style
		const message3 = new CaMessage({id:'case3', defaultText:'case3'});
		message3.changeStyle({
			color:'rgb(9,2,35)',
			size:'2rem',
			bgColor:'rgb(193,13,13)'
		})

		// Never remove this code, this is a flag to told us jsdom loads the any subresources such as scripts, stylesheets or images.
		document.getElementById('isLoad').checked = true;

	</script>
</html>
